<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript"
	src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="../assets/css/main.css" />
<style>
* {
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
}

.table_container {
	margin: 15px;
}

.jc_table td, thead th {
	text-align: center;
}

.page {
	width: 300px;
	margin: 0 auto;
}

.page a {
	padding: 0 5px;
}

.checkbox {
	text-align: center;
}

#page_sel {
	width: auto;
}
</style>
</head>
<body>
	<div class="table_container">
		<table class="jc_table table table-striped table-bordered">
			<thead>
				<tr>
					<th>内容</th>
					<th>日期</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody class="jc_tbody">
			</tbody>
		</table>
	</div>
	<div class="checkbox">
		<input type="checkbox" id="jc_sho"> <label for="jc_sho">显示全部</label>
	</div>
	<div class="page">
		<a href="javascript:void(0)" class="first_page">&lt;&lt;首页</a> <a
			href="javascript:void(0)" class="prev">上一页</a> <select id="page_sel">
		</select> <a href="javascript:void(0)" class="next">下一页</a> <a
			href="javascript:void(0)" class="last_page">尾页&gt;&gt;</a>

	</div>
	<script type="text/javascript">
		var url = "http://118.178.142.172:80/";
		var jc_page = {
			"flag" : "1",
			"openID" : "",
			"row" : "10",
			"page" : "1"
		};

		//初始化
		var temp = window.location.href;
		var code = temp.split("?")[1].split("&")[0].split("=")[1];
		var openID = "";
		$.ajax({
			url : url + "api/getOpenID",
			type : "POST",
			data : {
				"code" : code
			},
			dataType : "JSON",
			async : false,
			success : function(data) {
				jc_page.openID = data.openID;
			}
		});

		function getPage(jc_page) {
			$
					.ajax({
						url : url + "textNote/getNote",
						type : "POST",
						data : jc_page,
						dataType : "json",
						success : function(data) {
							$(".jc_tbody").empty();
							if (data.page.totalPage < jc_page.page) {
								jc_page.page = data.page.totalPage;
								getPage(jc_page);
							} else {
								jcTotPag(data.page.totalPage, jc_page.page);
								$
										.each(
												data.page.list,
												function(index, key) {
													$(".jc_table")
															.append(
																	"<tr><td>"
																			+ key.MSG
																			+ "</td><td>"
																			+ key.DATE
																			+ "</td><td><button class='btn del' onclick='delRow(this)' data_id='"
																			+ key.ID
																			+ "'>删除</button></td></tr>");
												})
							}
						}
					})
		}
		function delRow(obj) {
			$.ajax({
				url : url + "textNote/delete/" + $(obj).attr("data_id"),
				type : "POST",
				dataType : "json",
				success : function(data) {
					if (data.RESULT == "SUCCESS") {
						alert("删除成功");
					} else {
						alert("删除失败");
					}
					getPage(jc_page, jc_page.page);
				}
			})
		}
		function jcTotPag(n, pageNumber) {
			$("#page_sel").empty();
			for (var i = 1; i <= n; i++) {
				$("#page_sel").append('<option value='+i+'>' + i + '</option>');
			}
			$("#page_sel").val(pageNumber);
		}

		//初始化调用
		getPage(jc_page);
		//显示全部监听事件
		$("#jc_sho").on("change", function() {
			jc_page.page = 1;
			if ($("#jc_sho").prop("checked") == true) {
				jc_page.flag = 0;
			} else {
				jc_page.flag = 1;
			}
			getPage(jc_page);
		})

		//分页动作
		$("#page_sel").on("change", function() {
			jc_page.page = $(this).val();
			getPage(jc_page, $(this).val());

		});
		//上一页的功能
		$(".prev").on("click", function() {
			var page_sel = $("#page_sel");
			var val = Number(page_sel.val());
			if (val != 1) {
				page_sel.val(val - 1 + "");
				page_sel.change();
			}
		});
		//下一页的功能
		$(".next").on("click", function() {
			var page_sel = $("#page_sel");
			var val = Number(page_sel.val());
			if (val != page_sel.find("option").length) {
				page_sel.val(val + 1 + "");
				page_sel.change();
			}
		});

		//首页功能
		$(".first_page").on("click", function() {
			if ($("#page_sel").val() != 1) {
				$("#page_sel").val(1);
				$("#page_sel").change();
			}
		});
		//尾页功能
		$(".last_page").on("click", function() {
			if ($("#page_sel").val() != $("#page_sel").find("option").length) {
				$("#page_sel").val($("#page_sel").find("option").length);
				$("#page_sel").change();
			}
		});
	</script>
</body>
</html>
